<template>
  <!-- 购票详情 -->
  <view class="buy_ticket">
    <view class="white_place"></view>
    <view class="buy_ticket_top"></view>
    <view class="ticket">
      <image class="bg" src="../../static/images/ddtx_pic_card.png"></image>
      <view class="ticket_content">
        <view class="box_top">
          <view class="box_top_item">
            <view class="top">{{ ticketDetail.departStation.cityName }}</view>
            <view
              class="bottom"
              :class="{
                small_size: ticketDetail.departStation.stationName.length > 7,
              }"
              >{{ ticketDetail.departStation.stationName }}</view
            >
          </view>
          <view class="box_top_item">
            <view class="top">{{
              (currentDate + " " + ticketDetail.departTime) | formatDateTime
            }}</view>
            <view class="bottom"
              >{{ currentDate | formatDateChinese }}
              {{ currentDate | formatDayN3d }}</view
            >
          </view>
          <view class="box_top_item">
            <view class="top text_right">{{
              ticketDetail.destStation.cityName ||
                ticketDetail.destStation.stationName
            }}</view>
            <view
              class="bottom text_right"
              :class="{
                small_size: ticketDetail.destStation.stationName.length > 7,
              }"
              >{{ ticketDetail.destStation.stationName }}</view
            >
          </view>
        </view>
        <view class="box_bottom">
          <view class="box_bottom_item">
            <image class="img" src="../../static/images/lx_icon_cc.png"></image>
            <text
              >车次{{
                ticketDetail.busNo || ticketDetail.schCode || "未知"
              }}</text
            >
          </view>
          <view class="box_bottom_item text_right">
            <image class="img" src="../../static/images/lx_icon_lc.png"></image>
            <text>共计{{ ticketDetail.distance }}公里</text>
          </view>
          <view class="box_bottom_item text_right">
            <image class="img" src="../../static/images/lx_icon_sj.png"></image>
            <text>大约{{ ticketDetail.schDate || "未知" }}小时</text>
          </view>
        </view>
      </view>
      <view class="line"></view>
    </view>
    <view class="personnel">
      <view class="notice" @click="goNotice">
        <view class="notice_left">发车前30分钟可在线退票</view>
        <view class="notice_right">
          <text class="notice_right_text">预定须知</text>
          <uni-icons
            class="notice_icon"
            type="arrowright"
            size="18"
            color="#956E52"
          ></uni-icons>
        </view>
      </view>
      <view class="personnel_list">
        <view class="title" @click="popupType('seePassengers')">
          <view class="big">乘客</view>
          <view class="tip">（每单最多可购5张车票）</view>
        </view>
        <view class="list">
          <view
            class="item"
            @click="selectPassenger(item)"
            v-for="(item, index) in passengerList"
            :key="index"
            v-show="!item.hidden"
            >{{ item.name }}</view
          >
        </view>
      </view>
      <view class="selected_list">
        <view class="list">
          <view
            class="item"
            v-for="(item, index) in passengerList"
            v-show="item.hidden"
            :key="index"
          >
            <view class="delete" @click="deletePassenger(item)"
              ><image src="../../static/images/ddtx_icon_jian.png"></image
            ></view>
            <view class="item_content">
              <view class="top">
                <text class="text1">{{ item.name }}</text>
                <text class="text2">{{
                  item.passengerType | formatTicketType
                }}</text>
              </view>
              <view class="bottom"
                >身份证号：{{ item.certNo | formatCertNo }}</view
              >
            </view>
          </view>
        </view>
      </view>
      <view class="add" @click="addPassenger">
        <view class="add_btn">
          <image
            class="add_btn_icon"
            src="../../static/images/dd_icon_jiahao.png"
          ></image>
          <text class="add_btn_text">添加乘客</text>
        </view>
      </view>
    </view>
    <view class="phone">
      <image class="phone_img" src="../../static/images/iphone.png"></image>
      <text class="phone_title">手机号码</text>
      <text class="phone_num">{{ info.phone }}</text>
    </view>
    <view class="insurance">
      <view class="insurance_place1">
        <view class="box">
          <image class="img" src="../../static/images/icon_ccbzxy.png"></image>
          <text class="title">乘车保障建议</text>
        </view>
        <text class="tip">多一分保险多一份安心</text>
      </view>
      <view class="insurance_place2">
        <view class="box">
          <view class="box_top">
            <text class="box_top_item">汽车险</text>
            <text class="box_top_item">￥5</text>
            <text class="box_top_item">推荐</text>
          </view>
          <view class="box_bottom">最高6万保额乘意险</view>
        </view>
        <text class="tip">添加乘客后可购买汽车险</text>
      </view>
    </view>
    <view class="tips">
      <view class="tip_title">温馨提示</view>
      <view class="tip_content">
        我是超级贴心的温馨提示，我是超级贴心的温馨提示，我是超级贴心的温馨提示我是超级贴心的温馨提示。我是超级贴心的温馨提示我是超级贴心的温馨提示，
        我是超级贴心的温馨提示我是超级贴心的温馨提示，我是超级贴心的温馨提示我是超级贴心的温馨提示。
      </view>
    </view>
    <view class="bottom_place">
      <view class="bottom_place_left">
        <text class="item">订单总额</text>
        <text class="item">￥</text>
        <text class="item">{{ detail.amount }}</text>
      </view>
      <view class="bottom_place_right">
        <view class="detail" @click="popupType('seeDetail')">
          <text class="detail_text">明细</text>
          <view
            class="icon_wraper"
            :class="{ 'icon_wraper--active': popupFlag }"
            ><uni-icons
              class="icon"
              type="arrowdown"
              size="18"
              color="#956E52"
            ></uni-icons
          ></view>
        </view>
        <view class="btn_wraper"
          ><view class="btn" @click="submitOrder">立即支付</view></view
        >
      </view>
    </view>
    <uni-popup ref="popup" type="bottom" @change="popupChange">
      <view class="ticket_detail" v-show="currentPupupType == 'seeDetail'">
        <view class="title">订单明细</view>
        <view class="detail">
          <view class="detail_item" v-if="detail.ADULT">
            <text>成人票</text>
            <text>￥{{ ticketPricesPage.FULL }}x{{ detail.ADULT }}张</text>
          </view>
          <view class="detail_item" v-if="detail.CHILD">
            <text>儿童票</text>
            <text>￥{{ ticketPricesPage.HALF }}x{{ detail.CHILD }}张</text>
          </view>
          <view class="detail_item">
            <text>服务费</text>
            <text>￥{{ poundage }}x{{ selectedList.length }}份</text>
          </view>
          <!-- 					<view class="detail_item">
						<text>乘意险</text>
						<text>￥{{ carInsurance }}x{{ selectedList.length }}份</text>
					</view> -->
        </view>
      </view>
      <view class="passenger_list" v-show="currentPupupType == 'seePassengers'">
        <view class="title">选择乘车人</view>
        <view class="item" v-for="(item, index) in passengerList" :key="index">
          <text>{{ item.name }}</text>
          <text>{{ item.certNo }}</text>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { mapState, mapMutations } from "vuex";
// components
import uniIcons from "@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue";
import uniPopup from "@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue";
// api
import {
  $getPassenger,
  $submitOrder,
  $ordersSale,
  $ordersPay,
} from "../../service/index";
// utils
import { myShowToast, myShowModal } from "../../utils/utils.js";
export default {
  components: { uniIcons, uniPopup },
  data() {
    return {
      currentDate: this.$dayjs().format("YYYY-MM-DD"), // 当前车票日期
      mechNo: "",
      popupFlag: false, // 是否打开了明细
      currentPupupType: "", // popup类型
      passengerList: [], // 乘客列表
      selectedList: [], // 选择的列表
      ticketPricesPage: {
        FULL: 0, // 全价
        DISCOUNT: 0, // 折扣价
        STUDENT: 0, // 学生价
        HALF: 0, // 半价
      }, // 票价
      detail: {
        amount: 0, // 总金额
        ADULT: 0, // 成人票
        CHILD: 0, // 儿童票
        STUDENT: 0, // 学生票
        SOLDIER: 0, // 军人票
      }, // 明细
      carInsurance: 0, // 保险费
      poundage: 0, // 服务费
      orderResults: {}, // 下单之后返回的参数 有的话就是下单成功
    };
  },
  computed: {
    ...mapState(["info", "ticketDetail"]),
  },
  filters: {
    formatTicketType(val) {
      const types = {
        ADULT: "成人票",
        CHILD: "儿童票",
        STUDENT: "学生票",
        SOLDIER: "军人票",
      };
      return types[val] || "未知";
    },
    formatCertNo(val) {
      const len = val.length;
      return val.substring(0, 4) + " **** **** " + val.substring(len - 4, len);
    },
  },
  methods: {
    goNotice() {
      uni.showToast({
        title: "暂无跳转地址~",
        duration: 1000,
        icon: "none",
      });
    },
    popupType(type) {
      this.currentPupupType = type;
      switch (type) {
        case "seeDetail": // 查看明细
          if (!this.selectedList.length) {
            myShowToast("尚未添加乘客");
            return;
          }
          this.popupFlag = !this.popupFlag;
          this.popupFlag ? this.$refs.popup.open() : this.$refs.popup.close();
          break;
        case "seePassengers": // 查看乘车人列表
          this.$refs.popup.open();
          break;
        default:
          break;
      }
    },
    popupChange(e) {
      console.log(e);
      const type = this.currentPupupType;
      switch (type) {
        case "seeDetail": // 查看明细
          this.popupFlag = e.show;
          break;
        case "seePassengers": // 查看乘车人列表
          break;
        default:
          break;
      }
    },
    addPassenger() {
      uni.navigateTo({
        url: "../../center/addPassenger/addPassenger",
      });
    },
    // 选择乘车人
    selectPassenger(item) {
      if (this.selectedList.length >= 5) {
        myShowToast("每单最多可购5张车票");
        return;
      }
      item.hidden = true;
      console.log(this.passengerList);
      this.selectedList = this.passengerList.filter((i) => i.hidden);
      console.log(this.selectedList);
      // this.selectedList.push(item);
      console.log(this.ticketPricesPage);
      const poundage = this.poundage; // 服务费
      const ticketPricesPage = this.ticketPricesPage; // 票价
      switch (item.passengerType) {
        case "ADULT": // 成人票
          this.detail.amount += ticketPricesPage.FULL + poundage;
          this.detail.ADULT++;
          break;
        case "STUDENT": // 学生票
          this.detail.amount += ticketPricesPage.STUDENT + poundage;
          this.detail.STUDENT++;
          break;
        case "CHILD": // 儿童票
          this.detail.amount += ticketPricesPage.HALF + poundage;
          this.detail.CHILD++;
          break;
        case "SOLDIER": // 军人票
          this.detail.amount += ticketPricesPage.HALF + poundage;
          this.detail.SOLDIER++;
          break;
        default:
          // this.detail.amount += this.ticketPricesPage.FULL;
          myShowToast("乘客类型有误");
          break;
      }
    },
    // 删除选中乘客
    deletePassenger(item) {
      item.hidden = false;
      console.log(this.passengerList);
      this.selectedList = this.passengerList.filter((i) => i.hidden);
      console.log(this.selectedList);

      // const list = this.selectedList;
      // list.splice(
      //   list.findIndex((e) => e.id === item.id),
      //   1
      // );
      // this.selectedList = list;
      const poundage = this.poundage; // 服务费
      const ticketPricesPage = this.ticketPricesPage; // 票价
      switch (item.passengerType) {
        case "ADULT": // 成人票
          this.detail.amount -= ticketPricesPage.FULL + poundage;
          this.detail.ADULT--;
          break;
        case "STUDENT": // 学生票
          this.detail.amount -= ticketPricesPage.STUDENT + poundage;
          this.detail.STUDENT--;
          break;
        case "CHILD": // 儿童票
          this.detail.amount -= ticketPricesPage.HALF + poundage;
          this.detail.CHILD--;
          break;
        case "SOLDIER": // 军人票
          this.detail.amount -= ticketPricesPage.HALF + poundage;
          this.detail.SOLDIER--;
          break;
        default:
          // this.detail.amount -= this.ticketPricesPage.FULL;
          myShowToast("乘客类型有误");
          break;
      }
    },
    // 获取乘车人列表
    getPassenger() {
      $getPassenger()
        .then((res) => {
          const data = res.data;
          if (!data.success) {
            myShowModal(data.message || "网络错误");
            return;
          }
          let temp = data.content;
          temp = temp.map((i) => {
            console.log(i);
            console.log(this.selectedList);
            for (let j of this.passengerList) {
              console.log(j);
              if (j.id == i.id) {
                i.hidden = j.hidden;
              }
            }
            return i;
          });
          console.log(temp);
          this.passengerList = temp;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 提交订单-支付后自动购票
    submitOrder() {
      console.log("order:", this.orderResults);

      if (this.orderResults.id) {
        // 已经下过单了
        this.ordersPay(this.orderResults.id); // 请求支付
        return;
      }
      const selectedList = this.selectedList; // 选择的乘车人
      if (!selectedList.length) {
        myShowToast("尚未选择乘客");
        return;
      }
      const ticketDetail = this.ticketDetail; // 订单详情
      const params = {
        // "buyerCertNo": "", // 购票人身份证号
        // "buyerName": "", // 购票人姓名
        buyerPhone: this.info.phone, // 购票人手机号
        departDate: this.currentDate, // 出发日期
        departTime: ticketDetail.departTime, // 出发时间
        destStationId: ticketDetail.destStation.stationId, // 到达站id
        destStationName: ticketDetail.destStation.stationName, // 到达站名称
        distance: ticketDetail.distance, // 行驶里程
        merchantNo: this.mechNo, // 商户号
        schCode: ticketDetail.schCode, // 班次编号
        schId: ticketDetail.schId, // 班次id
        tickets: [],
      };
      selectedList.map((item) => {
        const ticketType = item.passengerType == "ADULT" ? "FULL" : "HALF";
        params.tickets.push({
          certNo: item.certNo, // 乘客身份证号
          name: item.name, // 乘客姓名
          ticketPrice: this.ticketPricesPage[ticketType], // 票价
          ticketType, // 票种
          phone: item.phone, // 手机号
          passengerType: item.passengerType, // 乘客类型
        });
      });
      //提交订单
      $submitOrder(params)
        .then((res) => {
          const data = res.data;
          if (!data.success) {
            myShowModal(data.message || "网络错误");
            return;
          }
          const content = data.content || {}; // 订单信息
          this.orderResults = content.order;
          console.log(content.payParam, content.order);
          const payParams = content.payParam || {};
          // 通过返回参数调起支付
          uni.requestPayment({
            provider: "wxpay",
            timeStamp: payParams.timeStamp,
            nonceStr: payParams.nonceStr,
            package: payParams.package_str,
            signType: payParams.signType,
            paySign: payParams.paySign,
            success: (res) => {
              console.log("success:" + JSON.stringify(res));
              // myShowModal('success'+JSON.stringify(res));
              // 支付成功后台自动调购票
              myShowToast("购买成功");
              uni.navigateBack({
                delta: 1,
              });
            },
            fail: (err) => {
              console.log("fail:" + JSON.stringify(err));
              // myShowModal('fail'+JSON.stringify(err));
              myShowToast("支付结果:支付失败");
            },
          });

          //   this.ordersPay(content.id || ""); // 请求支付
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 支付
    ordersPay(id) {
      if (id === "") {
        myShowToast("请求支付参数有误");
        return;
      }
      $ordersPay({}, id)
        .then((res) => {
          const data = res.data;
          console.log(data);
          if (!data.success) {
            myShowModal(data.message || "网络错误");
            return;
          }
          const payParams = data.content || {};
          // 获取参数 拉起支付
          uni.requestPayment({
            provider: "wxpay",
            timeStamp: payParams.timeStamp,
            nonceStr: payParams.nonceStr,
            package: payParams.package_str,
            signType: payParams.signType,
            paySign: payParams.paySign,
            success: (res) => {
              console.log("success:" + JSON.stringify(res));
              // myShowToast("支付结果:支付完成");
              // 支付成功后台自动调购票
              myShowToast("购买成功");
              uni.navigateBack({
                delta: 1,
              });
              //   this.ordersSale(id); // 支付成功  调售票
            },
            fail: (err) => {
              console.log("fail:" + JSON.stringify(err));
              // myShowModal('fail'+JSON.stringify(err));
              myShowToast("支付结果:支付失败");
            },
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 售票
    ordersSale(id) {
      $ordersSale({}, id)
        .then((res) => {
          const data = res.data;
          console.log(data);
          if (!data.success) {
            myShowModal(data.message || "网络错误");
            return;
          }
          myShowToast("购买成功");
          uni.navigateBack({
            delta: 1,
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  // watch: {
  //   passengerList: {
  //     handler(newV, old) {
  //       console.log("newb", newV);
  //       this.selectedList = newV.filter((i) => i.hidden);
  //     },
  //     immediate: true,
  //     deep: true,
  //   },
  // },
  onLoad(options) {
    this.currentDate = options.date;
    this.mechNo = options.mechNo;
    this.poundage = this.ticketDetail.departStation.poundage; // 服务费
    const ticketPrices = this.ticketDetail.ticketPrices; // 票价
    const ticketPricesPage = this.ticketPricesPage; // 页面存的票价
    ticketPrices.map((item) => {
      ticketPricesPage[item.type] = item.price;
    });
    this.ticketPricesPage = ticketPricesPage;
  },
  onShow() {
    this.getPassenger(); // 获取乘车人列表
  },
};
</script>

<style lang="scss">
page {
  background-color: #f4f6f9;
}
.buy_ticket {
  position: relative;
  .white_place {
    height: 142rpx;
    width: 100%;
    background-color: #ffffff;
    position: absolute;
    top: 0;
    z-index: 1;
  }
  .buy_ticket_top {
    background-color: #ffffff;
    height: 34rpx;
  }
  .ticket {
    margin: 0 auto;
    width: 710rpx;
    height: 268rpx;
    position: relative;
    z-index: 99;
    .bg {
      width: 710rpx;
      height: 268rpx;
    }
    .ticket_content {
      position: absolute;
      top: 0;
      left: 0;
      width: 710rpx;
      .box_top {
        display: flex;
        justify-content: space-between;
        padding: 0 28rpx 45rpx 28rpx;
        color: rgba(255, 255, 255, 1);
        .box_top_item {
          width: 35%;
        }
        .top {
          font-size: 36rpx;
          font-weight: 800;
          line-height: 101rpx;
        }
        .bottom {
          font-size: 28rpx;
          font-weight: 500;
        }
        .box_top_item:nth-child(2) {
          text-align: center;
          width: 25%;
          .bottom {
            height: 36rpx;
            line-height: 36rpx;
            background: rgba(0, 0, 0, 0.12);
            border-radius: 14rpx;
            font-size: 20rpx;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            opacity: 0.8;
          }
        }
      }
      .box_bottom {
        display: flex;
        justify-content: space-between;
        padding: 0 28rpx 0 25rpx;
        .box_bottom_item {
          width: 33.3%;
          padding-top: 28rpx;
          .img {
            width: 36rpx;
            height: 36rpx;
            display: inline-block;
            margin-right: 7rpx;
          }
          text {
            display: inline-block;
            font-size: 24rpx;
            height: 36rpx;
            line-height: 36rpx;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            vertical-align: 10rpx;
          }
        }
      }
    }
    .line {
      width: 645rpx;
      border-bottom: 2rpx dashed #d1d7e1;
      position: absolute;
      top: 188rpx;
      left: 33rpx;
    }
  }
  .personnel {
    margin: 21rpx auto 0;
    width: 710rpx;
    // height: 428rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(230, 235, 244, 0.8);
    border-radius: 8rpx;
    padding-top: 28rpx;
    .notice {
      width: 620rpx;
      height: 72rpx;
      line-height: 72rpx;
      padding: 0 20rpx;
      margin: 0 auto;
      background: rgba(255, 147, 7, 0.1);
      border-radius: 8rpx;
      display: flex;
      justify-content: space-between;
      .notice_left,
      .notice_right {
        font-size: 24rpx;
        font-weight: 500;
        color: rgba(149, 110, 82, 1);
      }
      .notice_right {
        font-weight: bold;
        .notice_right_text {
          display: inline-block;
          vertical-align: 4rpx;
        }
      }
    }
    .personnel_list {
      padding: 0 20rpx 20rpx 20rpx;
      border-bottom: 1px solid #d1d7e1;
      .title {
        padding: 48rpx 9rpx 30rpx 9rpx;
        .big {
          display: inline-block;
          font-size: 32rpx;
          font-weight: bold;
          color: rgba(51, 51, 51, 1);
        }
        .tip {
          display: inline-block;
          font-size: 24rpx;
          font-weight: 500;
          color: rgba(130, 141, 162, 1);
        }
      }
      .list {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        .item {
          border-radius: 24rpx;
          background-color: #f4f6f9;
          font-size: 24rpx;
          font-weight: 500;
          color: rgba(102, 102, 102, 1);
          padding: 12rpx 36rpx;
          margin: 10rpx 16rpx 10rpx 0;
        }
      }
    }
    .selected_list {
      .list {
        // padding: 0 18rpx;
        // max-height: 400rpx;
        // overflow-y: scroll;
        .item {
          padding: 33rpx 18rpx;
          border-bottom: 1px solid #d1d7e1;
          .delete {
            display: inline-block;
            margin-right: 34rpx;
            vertical-align: 40rpx;
            image {
              width: 40rpx;
              height: 40rpx;
            }
          }
          .item_content {
            display: inline-block;
            .top {
              .text1 {
                font-size: 28rpx;
                font-weight: bold;
                color: rgba(51, 51, 51, 1);
                margin-right: 23rpx;
              }
              .text2 {
                display: inline-block;
                border: 1rpx solid rgba(130, 141, 162, 1);
                border-radius: 4rpx;
                font-size: 20rpx;
                font-weight: 500;
                color: rgba(130, 141, 162, 1);
                padding: 4rpx 8rpx;
              }
            }
            .bottom {
              font-size: 20rpx;

              font-weight: 500;
              color: rgba(139, 150, 172, 1);
              padding-top: 16rpx;
            }
          }
        }
      }
    }
    .add {
      width: 100%;
      .add_btn {
        width: 200rpx;
        // height: 118rpx;
        padding: 38rpx 0;
        margin: 0 auto;
        // line-height: 118rpx;
        .add_btn_icon {
          width: 40rpx;
          height: 40rpx;
          margin-right: 20rpx;
        }
        .add_btn_text {
          display: inline-block;
          font-size: 32rpx;
          font-weight: bold;
          color: rgba(25, 102, 255, 1);
          vertical-align: 6rpx;
        }
      }
    }
  }
  .phone {
    margin: 20rpx auto;
    width: 710rpx;
    height: 96rpx;
    line-height: 96rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(230, 235, 244, 0.8);
    border-radius: 8rpx;
    .phone_img {
      display: inline-block;
      width: 36rpx;
      height: 36rpx;
      margin: 0 16rpx 0 28rpx;
      vertical-align: -8rpx;
    }
    .phone_title,
    .phone_num {
      font-size: 28rpx;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }
    .phone_title {
      margin-right: 22rpx;
    }
    .phone_num {
    }
  }
  .insurance {
    margin: 0 auto;
    width: 710rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(230, 235, 244, 0.8);
    border-radius: 8rpx;
    .insurance_place1 {
      height: 100rpx;
      line-height: 100rpx;
      display: flex;
      justify-content: space-between;
      border-bottom: 1rpx solid #d1d7e1;
      .box {
        .img {
          display: inline-block;
          width: 48rpx;
          height: 36rpx;
          margin: 0 16rpx 0 28rpx;
          vertical-align: -8rpx;
        }
        .title {
          font-size: 28rpx;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
        }
      }
      .tip {
        font-size: 24rpx;
        font-weight: 500;
        color: rgba(7, 193, 91, 1);
        padding-right: 28rpx;
      }
    }
    .insurance_place2 {
      // height: 100rpx;
      // line-height: 100rpx;
      display: flex;
      justify-content: space-between;
      // border-bottom: 1rpx solid #D1D7E1;
      .box {
        padding: 50rpx 0 38rpx 36rpx;
        .box_top {
          padding: 0 0 24rpx 0;
          .box_top_item {
            font-size: 28rpx;
            font-weight: bold;
            color: rgba(51, 51, 51, 1);
          }
          .box_top_item:nth-child(2) {
            color: #fe6f29;
          }
          .box_top_item:last-child {
            margin-left: 17rpx;
            display: inline-block;
            height: 28rpx;
            padding: 0 6rpx;
            background: linear-gradient(
              90deg,
              rgba(254, 112, 42, 1) 0%,
              rgba(255, 130, 7, 1) 100%
            );
            border-radius: 8rpx 0rpx 8rpx 0rpx;
            font-size: 20rpx;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
          }
        }
        .box_bottom {
          font-size: 20rpx;
          font-weight: 500;
          color: rgba(139, 150, 172, 1);
        }
      }
      .tip {
        padding-top: 54rpx;
        font-size: 24rpx;
        font-weight: 500;
        padding-right: 28rpx;
        color: rgba(139, 150, 172, 1);
      }
    }
  }
  .tips {
    margin: 40rpx auto 168rpx;
    width: 665rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: rgba(139, 150, 172, 1);
    .tip_title {
      width: 100%;
      text-align: center;
      padding-bottom: 16rpx;
    }
    .tip_content {
      text-indent: 48rpx;
    }
  }
  .bottom_place {
    z-index: 9999;
    position: fixed;
    bottom: 0;
    width: 670rpx;
    height: 108rpx;
    line-height: 108rpx;
    padding: 0 40rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px -1rpx 0px 0px rgba(209, 215, 225, 1);
    display: flex;
    justify-content: space-between;
    .bottom_place_left {
      .item {
        font-size: 24rpx;
        font-weight: 500;
        color: rgba(139, 150, 172, 1);
      }
      .item:nth-child(2) {
        color: #fe6f29;
      }
      .item:last-child {
        color: #fe6f29;
        font-size: 48rpx;
        font-weight: bold;
      }
    }
    .bottom_place_right {
      .detail {
        display: inline-block;
        margin-right: 17rpx;
        .detail_text {
          font-size: 24rpx;
          color: #8b96ac;
          padding-right: 6rpx;
        }
        .icon_wraper {
          display: inline-block;
          vertical-align: -2rpx;
          transition: all 0.3s linear;
        }
        .icon_wraper--active {
          transition: all 0.3s linear;
          transform: rotate(180deg);
        }
      }
      .btn_wraper {
        display: inline-block;
        width: 212rpx;
        height: 76rpx;
        line-height: 76rpx;
        background: linear-gradient(
          90deg,
          rgba(254, 112, 42, 1) 0%,
          rgba(255, 130, 7, 1) 100%
        );
        border-radius: 38rpx;
        // .btn{
        // 	width:212rpx;
        // 	height:76rpx;
        // 	line-height: 76rpx;
        // 	background:linear-gradient(90deg,rgba(254,112,42,1) 0%,rgba(255,130,7,1) 100%);
        // 	border-radius:38rpx;
        // }
      }
    }
  }
  .ticket_detail {
    background: #ffffff;
    padding-bottom: 108rpx;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    .title {
      width: 100%;
      height: 108rpx;
      line-height: 108rpx;
      text-align: center;
      font-size: 32rpx;
      font-weight: bold;
      color: rgba(51, 51, 51, 1);
      border-bottom: 1rpx solid #d1d7e1;
    }
    .detail {
      .detail_item {
        padding: 0 40rpx;
        display: flex;
        justify-content: space-between;
        height: 110rpx;
        line-height: 110rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }
    }
  }
  .passenger_list {
    background: #ffffff;
    padding-bottom: 108rpx;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    .title {
      width: 100%;
      height: 108rpx;
      line-height: 108rpx;
      text-align: center;
      font-size: 32rpx;
      font-weight: bold;
      color: rgba(51, 51, 51, 1);
      border-bottom: 1rpx solid #d1d7e1;
    }
    .item {
      line-height: 60rpx;
      padding: 0 40rpx;
      text {
        margin-right: 20rpx;
      }
    }
  }
}
</style>
